<template lang="pug">
div
  el-form
    el-form-item
      el-input(v-model="person.id")
    el-form-item
      el-input(v-model="person.name")
    el-form-item
      el-input(v-model="person.age")
    el-form-item
      el-button(@click="addHandleClick" ) 添加
  el-table(:data="list.data")
    el-table-column(prop="name" label="姓名")
    el-table-column(prop="age" label="年龄")
    el-table-column(label="操作")
      template(#default="scope") 
        el-button(@click="handleClick(scope.row)" type="text" size="small") 删除
  el-pagination( layout="prev, pager, next" :total="list.data.length" 
   :page-size="10" :current-page="1"  @current-change="pageCurrentChangeHandle")
</template>

<script>
import {defineComponent,reactive,ref,getCurrentInstance,onMounted } from 'vue'

// interface Person{
//     id:Number;
//     name:String;
//     age:Number;

// }


export default defineComponent ({
  setup() {
    
    let person = reactive({
      id:0,
      name:'',
      age:0
    })
    const list = reactive({
      data: []
    });
    const app = getCurrentInstance()?.appContext.config.globalProperties;
 
   const getList = async ()=> {
      return await app?.$Api({
        url: "/zjh/api/userlogin/getlist"
      }
       ).then((res)=>{
        // console.log(res);
        console.log(JSON.stringify(res))
        return res.data;
      });
    };

  // const list = await getList();
    onMounted(async ()=>{
     const data = await getList();
      for (let index = 0; index < data.length; index++) {
        list.data.push(data[index]);
      }
      // list=data;
      // console.log(list)
   
    }) 

    const addHandleClick=(e)=>{
      e.preventDefault();//注释掉默认行为
       const man = Object.assign({},person)
       list.data.push(man);
       person ={id:0,name:'',age:0}
        
    }

    const pageCurrentChangeHandle=(e)=>{
         e.preventDefault();//注释掉默认行为
    }

    const handleClick=(row)=>{
      list.data = list.data.filter(l=>l.id!==row.id)
    }

    return {person,list,handleClick,addHandleClick,pageCurrentChangeHandle}
  }
})
</script>

 